<template>
  <div class="MaintainDetial">
    <div class="MaintainDetial_top">
      <el-button type="primary" style="margin-left:20px;" @click="goBack"
        >返回</el-button
      >
    </div>
    <div class="detialItem">
      <div class="MaintainDetial_bottom">
        <div class="MaintainDetial_bottom_info">
          <h2>保养信息</h2>
          <div class="orderInfo">
            <div>任务编号:</div>
            <span>{{
              repairList.taskNumber == null ? "暂无数据" : repairList.taskNumber
            }}</span>
          </div>
          <div class="orderInfo">
            <div>保养单号:</div>
            <span>{{
              repairList.workOrderNumber == null
                ? "暂无数据"
                : repairList.workOrderNumber
            }}</span>
          </div>
          <div class="orderInfo">
            <div>员工编号:</div>
            <span>{{
              repairList.emoloyeeId == null ? "暂无数据" : repairList.emoloyeeId
            }}</span>
          </div>
          <div class="orderInfo">
            <div>保养人:</div>
            <span>{{
              repairList.realName == null ? "暂无数据" : repairList.realName
            }}</span>
          </div>
          <div class="orderInfo">
            <div>任务类型:</div>
            <span v-if="orderList.workOrderType == 0">告警</span>
            <span v-else-if="orderList.workOrderType == 1">报修</span>
            <span v-else-if="orderList.workOrderType == 2">保养</span>
          </div>
          <div class="orderInfo">
            <div>计划保养时间:</div>
            <span>{{
              repairList.plan_time == null ? "暂无数据" : repairList.plan_time
            }}</span>
          </div>
          <div class="orderInfo">
            <div>实际保养时间:</div>
            <span>{{
              repairList.true_time == null ? "暂无数据" : repairList.true_time
            }}</span>
          </div>
          <div class="orderInfo">
            <div>保养任务项:</div>
            <span>{{
              orderList.content == null ? "暂无数据" : orderList.content
            }}</span>
          </div>
          <!-- <div class="orderInfo">
            <div>提交时间:</div>
            <span>{{orderList.add_time==null?'暂无数据':orderList.add_time}}</span>
          </div>
          <div class="orderInfo">
            <div>提交内容:</div>
            <span>{{orderList.content==null?'暂无数据':orderList.content}}</span>
          </div>
          <div class="orderInfo" style="height:120px">
            <div>提交图片:</div>
            <div style="height:80px; marigin:0;padding:0;">
              <img
                style="width:80px;height:80px;float:left"
                src="../../assets/images/zh/dask_pic.png"
                alt
              />
            </div>
          </div>
          <div class="orderInfo" style="height:120px">
            <div>提交视频:</div>
            <div style="height:80px; marigin:0;padding:0;">
              <img
                style="width:80px;height:80px;float:left"
                src="../../assets/images/zh/dask_pic.png"
                alt
              />
            </div>
          </div>-->
          <div class="orderInfo">
            <div>设备编号:</div>
            <span>{{
              orderList.deviceNumber == null
                ? "暂无数据"
                : orderList.deviceNumber
            }}</span>
          </div>
          <div class="orderInfo">
            <div>设备名称:</div>
            <span>{{
              orderList.name == null ? "暂无数据" : orderList.name
            }}</span>
          </div>
          <div class="orderInfo">
            <div>设备类型:</div>
            <span>{{
              orderList.typeName == null ? "暂无数据" : orderList.typeName
            }}</span>
          </div>
          <div class="orderInfo">
            <div>设备型号:</div>
            <span>{{
              orderList.modelName == null ? "暂无数据" : orderList.modelName
            }}</span>
          </div>
          <div class="orderInfo">
            <div>设备位置:</div>
            <span>{{
              orderList.storeAddress == null
                ? "暂无数据"
                : orderList.storeAddress
            }}</span>
          </div>
          <div class="orderInfo">
            <div>负责人:</div>
            <span>{{
              orderList.addPerson == null ? "暂无数据" : orderList.addPerson
            }}</span>
          </div>
        </div>
      </div>
      <div class="MaintainDetial_bottom_jilu">
        <h2>保养历程</h2>
        <div class="orderInfo">
          <div>保养开始时间:</div>
          <span>{{
            repairList.start_time == null ? "暂无数据" : repairList.start_time
          }}</span>
        </div>
        <div class="orderInfo" style="height:130px">
          <div>保养前图片:</div>
          <ul>
            <li
              v-for="(item, index) in beforeList"
              :key="index + '1'"
              style="float:left;margin-right:10px;"
            >
              <span v-if="item == ''">暂无图片</span>
              <viewer v-else>
                <img
                  :src="item"
                  alt
                  style="width:80px;height:80px;border:1px solid #ededed"
                />
              </viewer>
            </li>
          </ul>
        </div>
        <div class="orderInfo">
          <div>处理措施:</div>
          <span>{{
            repairList.dealMsg == null ? "暂无数据" : repairList.dealMsg
          }}</span>
        </div>
        <div class="orderInfo" style="height:130px">
          <div>保养后图片:</div>
          <ul>
            <li
              v-for="(item, index) in afterList"
              :key="index + '1'"
              style="float:left;margin-right:10px;"
            >
              <span v-if="item == ''">暂无图片</span>
              <viewer v-else>
                <img
                  :src="item"
                  alt
                  style="width:80px;height:80px;border:1px solid #ededed"
                />
              </viewer>
            </li>
          </ul>
        </div>
        <div class="orderInfo">
          <div>处理结果:</div>
          <span>{{
            repairList.dealResult == null ? "暂无数据" : repairList.dealResult
          }}</span>
        </div>
        <div class="orderInfo">
          <div>保养结束时间:</div>
          <span>{{
            repairList.end_time == null ? "暂无数据" : repairList.end_time
          }}</span>
        </div>
        <div class="orderInfo">
          <div>保养用时(h):</div>
          <span>{{
            repairList.duration == null ? "暂无数据" : repairList.duration
          }}</span>
        </div>
      </div>
      <div class="MaintainDetial_bottom_fankui">
        <h2>反馈验收</h2>
        <div class="orderInfo" style="height:80px">
          <div>星级评价:</div>
          <span style="display:block ;margin-left:-40px;">
            <el-rate v-model="orderList.appraise"></el-rate>
          </span>
        </div>
        <div class="orderInfo">
          <div>备注:</div>
          <span>{{
            orderList.remark == null ? "暂无数据" : orderList.remark
          }}</span>
        </div>
        <div class="orderInfo">
          <div>确认时间:</div>
          <span>{{
            orderList.confirm_time == null ? "暂无数据" : orderList.confirm_time
          }}</span>
        </div>
      </div>

      <div class="MaintainDetial_bottom_other">
        <h2 style="margin-top:30px;">他还经历了哪些保养和保养</h2>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="MaintenanceStaff_top_right"
          @change="handlerdate"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-tabs
          v-model="activeName"
          style="margin-top:30px"
          @tab-click="handleClick"
        >
          <el-tab-pane label="全部" name="first">
            <div
              class="maintainTab"
              v-for="(item, index) in repairSearchList"
              :key="index"
            >
              <div class="maintainTab_top">
                <img src="../../assets/images/zh/eye.png" alt />
              </div>
              <ul>
                <li>
                  <span style="color:#9EA0A5">报修时间:</span>
                  <b style="color:#9EA0A5">{{
                    item.add_time == null ? "暂无数据" : item.add_time
                  }}</b>
                </li>
                <li>
                  <span>维修单号:</span>
                  <b>{{
                    item.workOrderNumber == null
                      ? "暂无数据"
                      : item.workOrderNumber
                  }}</b>
                </li>
                <li>
                  <span>报修内容:</span>
                  <b>{{ item.content == null ? "暂无数据" : item.content }}</b>
                </li>
                <li>
                  <span>原因分析:</span>
                  <b>{{
                    item.analysis == null ? "暂无数据" : item.analysis
                  }}</b>
                </li>
                <li>
                  <span>处理措施:</span>
                  <b>{{ item.dealMsg == null ? "暂无数据" : item.dealMsg }}</b>
                </li>
              </ul>
            </div>
            <div
              class="maintainTab"
              style="background:#fff9eb"
              v-for="item in maintainSearchList"
              :key="item.id"
            >
              <div class="maintainTab_top" style="background:#ffb300">
                <img src="../../assets/images/zh/eye.png" alt />
              </div>
              <ul>
                <li>
                  <span style="color:#9EA0A5">保养时间:</span>
                  <b style="color:#9EA0A5">{{
                    item.add_time == null ? "暂无数据" : item.add_time
                  }}</b>
                </li>
                <li>
                  <span>保养单号:</span>
                  <b>{{
                    item.workOrderNumber == null
                      ? "暂无数据"
                      : item.workOrderNumber
                  }}</b>
                </li>
                <li>
                  <span>保养任务项:</span>
                  <b>{{ item.content == null ? "暂无数据" : item.content }}</b>
                </li>
                <li>
                  <span>处理措施:</span>
                  <b>{{ item.dealMsg == null ? "暂无数据" : item.dealMsg }}</b>
                </li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="维修" name="second">
            <div
              class="maintainTab"
              v-for="item in repairSearchList"
              :key="item.id"
            >
              <div class="maintainTab_top">
                <img src="../../assets/images/zh/eye.png" alt />
              </div>
              <ul>
                <li>
                  <span style="color:#9EA0A5">报修时间:</span>
                  <b style="color:#9EA0A5">{{ item.add_time }}</b>
                </li>
                <li>
                  <span>维修单号:</span>
                  <b>{{
                    item.workOrderNumber == null
                      ? "暂无数据"
                      : item.workOrderNumber
                  }}</b>
                </li>
                <li>
                  <span>报修内容:</span>
                  <b>{{ item.content == null ? "暂无数据" : item.content }}</b>
                </li>
                <li>
                  <span>原因分析:</span>
                  <b>{{
                    item.analysis == null ? "暂无数据" : item.analysis
                  }}</b>
                </li>
                <li>
                  <span>处理措施:</span>
                  <b>{{ item.dealMsg == null ? "暂无数据" : item.dealMsg }}</b>
                </li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="保养" name="third">
            <div
              class="maintainTab"
              style="background:#fff9eb"
              v-for="item in maintainSearchList"
              :key="item.id"
            >
              <div class="maintainTab_top" style="background:#ffb300">
                <img src="../../assets/images/zh/eye.png" alt />
              </div>
              <ul>
                <li>
                  <span style="color:#9EA0A5">保养时间:</span>
                  <b style="color:#9EA0A5">{{
                    item.add_time == null ? "暂无数据" : item.add_time
                  }}</b>
                </li>
                <li>
                  <span>保养单号:</span>
                  <b>{{
                    item.workOrderNumber == null
                      ? "暂无数据"
                      : item.workOrderNumber
                  }}</b>
                </li>
                <li>
                  <span>保养任务项:</span>
                  <b>{{ item.content == null ? "暂无数据" : item.content }}</b>
                </li>
                <li>
                  <span>处理措施:</span>
                  <b>{{ item.dealMsg == null ? "暂无数据" : item.dealMsg }}</b>
                </li>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import {
  orderDetail,
  maintainDetail,
  repairSearch,
  maintainSearch,
  repairPic
} from "../../utils/api";
export default {
  data() {
    return {
      value1: null,
      ruleForm: {
        name: ""
      },
      activeName: "first",
      labelPosition: "top",
      // 工单id
      OrderId: "",
      // 保养id
      ID: "",
      // 项目id
      productId: "",
      // 工单的数据
      orderList: [],
      // 保养列表的数据
      repairList: [],
      //其他的分页
      otherQuery: {
        pageNumber: 1,
        pageSize: 3,
        projectId: "",
        startTime: "",
        endTime: ""
      },
      // 保养列表的数据
      repairSearchList: [],
      // 保养列表的数据
      maintainSearchList: [],
      // 保养前的图片数组
      beforeList: [],
      // 保养后的图片数组
      afterList: []
    };
  },
  methods: {
    goBack() {
      this.$store.dispatch("delVisitedViews", this.$route).then(obj => {
        this.$router.push("/MaintenanceRecords");
      });
      window.sessionStorage.removeItem("orderId");
      window.sessionStorage.removeItem("id");
    },
    // 获取工单详情
    getorderDetail() {
      const params = {
        id: this.OrderId
      };
      this.postRequest(orderDetail, params).then(res => {
        if (res.code == 200) {
          this.orderList = res.data[0];
        }
      });
    },
    // 获取保养列表
    getmaintainDetail() {
      const params = {
        id: this.ID
      };
      this.postRequest(maintainDetail, params).then(res => {
        if (res.code == 200) {
          this.repairList = res.data[0];
        }
      });
    },
    // 获取维修列表
    getrepairSearch() {
      const params = {
        pageNumber: this.otherQuery.pageNumber,
        pageSize: this.otherQuery.pageSize,
        projectId: this.productId,
        startTime: this.otherQuery.startTime,
        endTime: this.otherQuery.endTime
      };
      this.postRequest(repairSearch, params).then(res => {
        if (res.code == 200) {
          this.repairSearchList = res.data.data;
        }
      });
    },
    // 获取保养列表
    getmaintainSearch() {
      const params = {
        pageNumber: this.otherQuery.pageNumber,
        pageSize: this.otherQuery.pageSize,
        projectId: this.productId,
        startTime: this.otherQuery.startTime,
        endTime: this.otherQuery.endTime
      };
      this.postRequest(maintainSearch, params).then(res => {
        if (res.code == 200) {
          this.maintainSearchList = res.data.data;
        }
      });
    },
    // 日期搜索
    handlerdate(val) {
      this.otherQuery.startTime = val[0];
      this.otherQuery.endTime = val[1];
      // console.log(val);
    },
    handleClick(tab) {
      if (tab.name == "first") {
        this.getrepairSearch();
        this.getmaintainSearch();
      } else if (tab.name == "second") {
        this.getrepairSearch();
      } else if (tab.name == "third") {
        this.getmaintainSearch();
      }
    },
    // 获取保养记录的图片
    getrepairPic() {
      const params = {
        id: this.ID
      };
      this.postRequest(repairPic, params).then(res => {
        if (res.code == 200) {
          this.beforeList = res.data.fault;
          this.afterList = res.data.partPic;
        }
      });
    }
  },
  created() {
    this.OrderId = window.sessionStorage.getItem("orderId");
    this.ID = window.sessionStorage.getItem("id");
    this.productId = window.sessionStorage.getItem("productId");
    this.getorderDetail();
    this.getmaintainDetail();
    this.getrepairSearch();
    this.getmaintainSearch();
    this.getrepairPic();
  }
};
</script>
<style lang="less" scoped>
.MaintainDetial {
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .MaintainDetial_top {
    padding: 10px;
    border: 1px solid #edeff4;
  }
  .detialItem {
    display: flex;
    flex-direction: row;
    justify-content: center;
    border: 1px solid #edeff4;
    padding: 20px;
    h2 {
      font-weight: normal;
      font-size: 24px;
      color: #3e3f42;
      margin: 10px;
    }
    .MaintainDetial_bottom {
      display: flex;
      flex: 1;
      .MaintainDetial_bottom_info {
        .MaintainDetial_bottom_info_left {
          flex: 1;
        }
      }
    }
    .MaintainDetial_bottom_fankui {
      flex: 1;
    }
    .MaintainDetial_bottom_jilu {
      flex: 1;
    }
    .MaintainDetial_bottom_other {
      flex: 1;
      display: flex;
      flex-direction: column;
      .el-tabs__nav-scroll {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 50px;
        padding: 10px;
      }
      .el-tabs__item {
        font-size: 15px;
        font-family: "Microsoft YaHei";
      }
      .maintainTab {
        width: 300px;
        height: 216px;
        background: #ebf4ff;
        margin-bottom: 20px;

        .maintainTab_top {
          width: 40px;
          height: 20px;
          background: #0077f8;
          border-radius: 20px 0 0 20px;
          margin-left: auto;
          img {
            float: right;
            padding-right: 5px;
          }
        }
        ul {
          padding: 5px 10px;
          li {
            line-height: 25px;
            span {
              font-size: 12px;
            }
            b {
              font-size: 12px;
              font-weight: normal;
            }
          }
        }
      }
    }
    .orderInfo {
      width: 300px;
      height: 56px;
      border: 1px solid #eaedf3;
      background-color: #ffffff;
      border-radius: 5px;
      margin-bottom: 25px;
      div {
        height: 20px;
        font-size: 12px;
        color: #9ea0a5;
        padding-left: 20px;
        padding-top: 10px;
      }
      span {
        padding-left: 20px;
        color: #3e3f42;
      }
    }
  }
}
</style>
